<template>
	<div>
		<!-- vant 输入框 -->
		<van-search  shape="round" v-model.trim="value" placeholder="请输入搜索关键词" @clear="fn" @input="inputFn"/>
		<!-- 搜索下容器 -->
		<div class="search_wrap" v-if="keywordsList.length === 0">
			<!-- 标题 -->
			<p class="hot_title">热门搜索</p>
			<!-- 热搜关键词容器 -->
			<div class="hot_name_wrap">
				<!-- 每个搜索关键词 -->
				<!-- 循环遍历 -->
				<span class="hot_item" v-for="(item,index) in hotList" :key="index" @click="sel(item.first)">{{ item.first }}</span>
			</div>
		</div>


		<!-- 搜索结果 -->
		<div class="search_wrap" v-else>
			<p class="hot_title">最佳匹配</p>
		   <van-list
 				 v-model="loading"
 				 :finished="finished"
 				 finished-text="没有更多了"
 				 @load="onLoad">
				<!-- <van-cell v-for="item in keywordsList" :key="item.id" :title="item.name"  :label="item.ar[0].name + '--' + item.name " center> -->
				<!-- 使用 right-icon 插槽来自定义右侧图标 -->
				<!-- <template #right-icon>
			 		 <van-icon name="play-circle-o" size="0.6rem"/>
				</template>
		   		</van-cell> -->
				   <SongItem
         			 v-for="item in keywordsList"
         			 :key="item.id"
					 :title="item.name"
         			 :label="item.ar[0].name"
         			 :id="item.id">
					</SongItem>
			</van-list>
		</div>
	</div>
</template>
<script>
import SongItem from '@/components/SongItem.vue'
import { hotSearchList,keywordSearchList } from '@/api'
// todo 复习 async
	export default {
		data(){
			return{
				value:'', //输入框
				hotList:[],  //热搜关键字
				keywordsList:[],
				// list:[],
				loading:false,//表示是否正在加载更多数据，默认为false，表示未在加载
				finished:false,//表示是否所有的数据都加载结束了，默认为false，表示没有结束
				page:1//默认展示页数
			}
		},
		components:{
			SongItem
		},
		async created () {
			const {data:res} = await hotSearchList()
			console.log(res);
			this.hotList = res.result.hots
		},
		methods:{
			async inputFn(){
				// 输入内容的时候，来发送请求获取搜索结果
				// 没有内容，不发送请求获取搜索结果
				if(this.value === '') return

				// 每次输入的时候，都是从第一页还是获取搜结果 + finished 置为false
				this.page = 1
				this.finished = false

				const res = await this.getResFn()
				console.log(res);

				if(res.result.songs === undefined){
					// 没有songs数据
					// 把keywordsList数组置为空
					this.keywordsList = []
					return
				}


				// 把获取到的结果直接赋值给resArr数组（之前的搜索结果直接给覆盖掉）
				this.keywordsList = res.result.songs
			},
			async onLoad(){
				// console.log('滚到底了');
				// 发送请求拿更多的搜索结果
				// page记得+1，表示加载了下一页数据
				this.page ++
				const res = await this.getResFn()

				if (res.result.songs === undefined) {
					// 没有数据了
         			 this.finished = true;
					//  本次请求完成
					 this.loading = false
					 return
        		}


				// 展开运算符，实现拼接效果，将第二次请求的数据和第一次添加到一起
				this.keywordsList = [...this.keywordsList, ...res.result.songs]
				this.loading = false
				
			},
			async sel(name){
			this.value = name

			// 每次输入的时候，都是从第一页还是获取搜结果 + finished 置为false
			this.page = 1
			this.finished = false

			
			// const {data:res2} = await keywordSearchList({
			// 		keywords:this.value,
			// })
			// console.log(res2);
			// this.keywordsList = res2.result.songs
			// 调用函数，拿到搜索数据
			const res = await this.getResFn()
			// console.log(res);
			this.keywordsList = res.result.songs
		    },
			// 清除按钮功能
			fn(){
				this.keywordsList = []
			},
					// 封装函数，用于获取搜索结果
			async getResFn(){
				// 发送请求，获取到搜索结果
				const {data:res2} = await keywordSearchList({
					keywords:this.value,
					limit:50,
					offset:(this.page - 1) * 50
				})
				// !记得把获取到的数据给return，返回出去
				return res2
			}
		},
	
	}
</script>

<style scoped>
	/* 搜索容器的样式 */
	.search_wrap {
		padding: 0.266667rem;
	}

	/*热门搜索文字标题样式 */
	.hot_title {
		font-size: 0.32rem;
		color: #666;
	}

	/* 热搜词_容器 */
	.hot_name_wrap {
		margin: 0.266667rem 0;
	}

	/* 热搜词_样式 */
	.hot_item {
		display: inline-block;
		height: 0.853333rem;
		margin-right: 0.213333rem;
		margin-bottom: 0.213333rem;
		padding: 0 0.373333rem;
		font-size: 0.373333rem;
		line-height: 0.853333rem;
		color: #333;
		border-color: #d3d4da;
		border-radius: 0.853333rem;
		border: 1px solid #d3d4da;
	}
</style>
